<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            text-align: center;
        }

        #table {
            width: 600px;
            height: 100px;
            text-align: center;
        }

        p {
            margin: 0;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <h1>欢迎光临_vue开发收银系统_水果店</h1>
    <!-- 创建一个容器 -->
    <table id="table" border="1">
        <tr>
            <td>
                <p>苹果 {{price}}￥/斤，折扣&lt;{{discount}}折&gt;</p>
            </td>
        </tr>
        <tr>
            <td>
                <!-- v-model:可以动态的绑定数据 -->
                请输入你要购买的斤数<input v-model="count" type="text">
            </td>
        </tr>
        <tr>
            <td>
                <!-- 点击按钮时计算出价格 -->
                <button @click="getResult">结账买单~</button>
            </td>
        </tr>
        <tr>
            <td>结账单：单价：{{total}}￥元 折后价：{{result}}￥元 省了：{{saveMoney}}￥元</td>
        </tr>


    </table>


    <script src="./vue.js"></script>
    <script>
        // 1.首先创建一个有宽高的容器
        // 2.然后创建一个vue实例
        // 3.准备配置项
        // 3.1添加挂载点
        const app = new Vue({
            el: '#table',
            data: {
                price: 10,
                discount: 8,
                count: 4,
                total: 0,
                result: 0,
                saveMoney: 0
            }, methods: {
                getResult() {
                    console.log(11);
                    // 计算出总价
                    this.total = this.price * this.count;
                    console.log('总价为', this.total);
                    // 计算出折后的价格
                    this.result = this.total * this.discount / 10;
                    console.log("折后的价格：", this.result);
                    // 计算出节省了多少钱
                    this.saveMoney = this.total - this.result;
                    console.log('节省出的钱：', this.saveMoney);



                }

            }
        })
    </script>
</body>

</html>